<template>
  <div class="dashboard-container">
    <div class="dashboard-text">欢迎 {{ name }} 来到 音渊后台管理系统</div>
    <div class="line">
      <WatchBox class="box" icon-name="user" class-name="用户数量" :numbers="userNumber" path="user"/>
      <WatchBox class="box" icon-name="song" class-name="歌曲数量" :numbers="songNumber" path="song"/>
      <WatchBox class="box" icon-name="menu" class-name="歌单数量" :numbers="menuNumber" path="menu"/>
    </div>
    <div class="line">
      <div ref="chart" class="chart"></div>
      <div ref="chart2" class="chart"></div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import WatchBox from "@/components/WatchBox/index.vue";
import * as echarts from 'echarts';
import {getUserList} from "@/api/appUser";
import {getMusicList} from "@/api/song";
import {getMenuList} from "@/api/menu";


export default {
  name: 'Dashboard',
  components: {WatchBox},
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      userNumber: null,
      songNumber: null,
      menuNumber: null,
      chartData: [0, 0, 0, 0],
      chart2Data: [0, 0, 0, 0],
    }
  },
  mounted() {
    this.getNumber()
  },
  methods: {
    getCharts() {
      const myChart = echarts.init(this.$refs.chart);
      myChart.setOption({
        title: {
          text: '用户年龄分布条形统计图',
        },
        xAxis: {
          type: 'category',
          data: ['未成年', '成年人', '中年人', '老年人',]
        },
        yAxis: {
          minInterval: 1,
          type: 'value'
        },
        series: [
          {
            data: this.chartData,
            type: 'bar'
          }
        ]
      });

      const myChart2 = echarts.init(this.$refs.chart2);
      myChart2.setOption({
        title: {
          text: '季度创建歌单数量变化折线统计图',
        },
        xAxis: {
          type: 'category',
          data: ['第一季度', '第二季度', '第三季度', '第四季度']
        },
        yAxis: {
          minInterval: 1,
          type: 'value'
        },
        series: [
          {
            data: this.chart2Data,
            type: 'line'
          }
        ]
      });
    },
    async getNumber() {
      await getUserList().then(res => {
        this.userNumber = res.data.list.length
        res.data.list.map(i => {
          if (i.age === null) return;
          if (i.age >= 0 && i.age <= 18) {
            this.chartData[0]++;
          } else if (i.age <= 40) {
            this.chartData[1]++;
          } else if (i.age <= 65) {
            this.chartData[2]++;
          } else {
            this.chartData[3]++;
          }
        })
      })
      await getMusicList().then(res => {
        this.songNumber = res.data.list.length
      })
      await getMenuList().then(res => {
        this.menuNumber = res.data.list.length
        res.data.list.map(i => {
          let time = new Date(i.createTime);
          let month = time.getMonth() + 1
          if (month >= 1 && month <= 3) {
            this.chart2Data[0]++;
          } else if (month <= 6) {
            this.chart2Data[1]++;
          } else if (month <= 9) {
            this.chart2Data[2]++;
          } else {
            this.chart2Data[3]++;
          }
        })
      })
      this.getCharts()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.line {
  display: flex;
  margin-left: 50px;

  .box {
    margin-right: 100px;
  }
}

.chart {
  margin-top: 50px;
  width: 550px;
  height: 350px;
}
</style>
